<template>
    <div class="assets-home">
      <native :title="title"></native>
      <div class="assets-box">
        <div class="assets-box-back" @click="activeCode(true)">
          <img style="position: absolute;right: 0px;bottom: 0px;width: 222px;" src="../assets/img/Z.svg" alt="">
          <div class="font-usdt font-z1">USDT</div>
          <div>
            <span style="font-size: 24px;font-family: axis;">{{dataList.usdtBalance}}</span>
            <span style="font-size: 12px;">个</span>
          </div>
        </div>
        <div class="assets-box-back" style="background-color: #FEA646;" @click="activeCode(false)">
          <img style="position: absolute;right: 0px;bottom: 0px;width: 222px;" src="../assets/img/Z.svg" alt="">
          <div class="font-usdt font-z1">GTZ</div>
          <div>
            <span style="font-size: 24px;font-family: axis;">{{dataList.gtzBalance}}</span>
            <span style="font-size: 12px;">个</span>
          </div>
        </div>
      </div>
      <div class="assets-tab-list">
        <div v-if="showNumCode" style="position: relative;">
          <div style="display: inline-block;position: relative;">
            <span :class="usdtActive==0?'assets-active-font':'assets-default-font'" @click="activeButton(0)">全部</span>
            <span v-if="usdtActive==0" class="assets-icon"></span>
          </div>
          <div style="display: inline-block;position: relative;">
            <span :class="usdtActive==1?'assets-active-font':'assets-default-font'" @click="activeButton(1)">充值</span>
            <span v-if="usdtActive==1" class="assets-icon"></span>
          </div>
          <div style="display: inline-block;position: relative;">
            <span :class="usdtActive==2?'assets-active-font':'assets-default-font'" @click="activeButton(2)">提现</span>
            <span v-if="usdtActive==2" class="assets-icon"></span>
          </div>
        </div>
        <div v-else style="position: relative;">
          <div style="display: inline-block;position: relative;">
            <span :class="usdtActive==3?'assets-active-font':'assets-default-font'" @click="activeButton(3)">挖矿收益</span>
            <span v-if="usdtActive==3" class="assets-icon" style="left:35px;"></span>
          </div>
          <div style="display: inline-block;position: relative;">
            <span :class="usdtActive==4?'assets-active-font':'assets-default-font'" @click="activeButton(4)">转账明细</span>
            <span v-if="usdtActive==4" class="assets-icon" style="left:35px;"></span>
          </div>
        </div>
        <div style="padding: 20px 0px;">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div style="padding: 20px 0px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);" @click="jumpDetail(val)" v-for="val in listData">
              <div style="font-size: 14px;margin-bottom: 4px;">
                <span style="display: inline-block;width: 242px;overflow: hidden;text-overflow: ellipsis;">{{val.toAddress}}</span>
                <span style="float: right;color: #6E59FF;font-family: axis;" v-if="val.transferType == 1">+{{val.transferNum}}{{val.currency}}</span>
                <span style="float: right;color: #FEA646;font-family: axis;" v-if="val.transferType == 2">-{{val.transferNum}}{{val.currency}}</span>
              </div>
              <div style="font-size: 12px;color: rgba(255, 255, 255, .45);margin-bottom: 6px;">{{utils.dateZhuan(val.createTime)}}</div>
              <div v-if="val.withdrawStatus == 1" style="font-size: 12px;color: #6E59FF;">待审核</div>
              <div v-if="val.withdrawStatus == 2" style="font-size: 12px;color: #6E59FF;">审核通过</div>
              <div v-if="val.withdrawStatus == 3" style="font-size: 12px;color: #6E59FF;">审核不通过</div>
            </div>
          </van-list>
        </div>
      </div>
      <div class="assets-bottom-btn">
        <div class="btn1" @click="withdrawDepositCli">
          <img src="../assets/img/transfer-icon-cashout-1.svg" alt="">
          <span>提现</span>
        </div>
        <div class="btn2" style="margin-right: 0px;" @click="jumpRecharge">
          <img src="../assets/img/transfer-icon-invest.svg" alt="">
          <span>充值</span>
        </div>
      </div>
    </div>

  </template>

  <script>
  import native from './public/native.vue'
  import { Toast,List } from 'vant';
  export default {
    name: 'assetsManagement',
    data () {
      return {
        title:'资产管理',
        usdtActive:0,
        showNumCode:true,
        dataList:[],
        loading:false,
        finished:false,
        num:0,
        total:0,
        listData:[],
      }
    },
    components:{
      native,
      [List.name]:List
    },
    computed: {

    },
    mounted() {
        this.initData();
    },
    methods: {
      initData(){
        this.$http.get(this.utils.config+'/gz/assets/assets_info').then((data)=>{
          this.dataList = data.data.data;
          localStorage.setItem('usdtBalance',data.data.data.usdtBalance);
          localStorage.setItem('gtzBalance',data.data.data.gtzBalance);
          localStorage.setItem('gtzFreezeBalance',data.data.data.gtzFreezeBalance);
          localStorage.setItem('usdtFreezeBalance',data.data.data.usdtFreezeBalance);
          localStorage.setItem('usdtFee',data.data.data.usdtFee);     
          localStorage.setItem('gtzFee',data.data.data.gtzFee);       
          localStorage.setItem('gtzMaxWithdrawAmount',data.data.data.gtzMaxWithdrawAmount);
          localStorage.setItem('gtzMinWithdrawAmount',data.data.data.gtzMinWithdrawAmount);
          localStorage.setItem('usdtMaxWithdrawAmount',data.data.data.usdtMaxWithdrawAmount);
          localStorage.setItem('usdtMinWithdrawAmount',data.data.data.usdtMinWithdrawAmount);
        })
      },
      onLoad(){
        var that = this;
        that.num++;
        if(this.usdtActive != 3){
          var code,transferType;
          if(this.showNumCode){
            code = 'USDT';
            transferType = this.usdtActive;
          }else{
            code = 'GTZ';
            transferType = '';
          }
          if(this.usdtActive == 0){
            transferType = '';
          }
          that.$http.get(that.utils.config+'/gz/assets/dw_recording?currentPage='+this.num+'&pageSize=10&transferType='+transferType+"&currency="+code).then((data)=>{
            that.total = data.data.totalSize;
            for (let i = 0; i < data.data.data.length; i++) {
                that.listData.push(data.data.data[i]);
                that.loading = false;
            }
            if (that.total == that.listData.length) {
                that.finished = true;
            }
          })
        }else{
          var code,transferType;
          if(this.showNumCode){
            code = 'USDT';
            transferType = this.usdtActive;
          }else{
            code = 'GTZ';
            transferType = '';
          }
          that.$http.get(that.utils.config+'/gz/assets/dw_recording?currentPage='+this.num+'&pageSize=10&transferType='+transferType+"&currency="+code).then((data)=>{
            that.total = data.data.totalSize;
            for (let i = 0; i < data.data.data.length; i++) {
                that.listData.push(data.data.data[i]);
                that.loading = false;
            }
            if (that.total == that.listData.length) {
                that.finished = true;
            }
          })
        }
      },
      activeButton(num){
        this.usdtActive = num;
        this.num = 0;
        this.listData=[];
        this.onLoad();
      },
      activeCode(bol){
        this.num = 0;
        this.showNumCode = bol;
        if(bol){
          this.usdtActive = 0;
        }else{
          this.usdtActive = 3;
        }
        this.listData=[];
        this.onLoad();
      },
      withdrawDepositCli(){
        if(localStorage.getItem('exchangePwd') == 'null'){
          Toast('请先设置交易密码！')
          this.$router.replace('/safetyCenter');
          return
        }
        if(localStorage.getItem('cardState') == 1){
          Toast('请先实名认证！')
          this.$router.replace('/safetyCenter');
          return
        }
        var path="";
        if(this.showNumCode){
          path = '/withdrawDeposit/USDT';
        }else{
          path = '/withdrawDeposit/GTZ';
        }
        this.$router.push(path);
      },
      jumpDetail(val){
        this.utils.detailObj = val;
        this.$router.push('/transactionDetails')
      },
      jumpRecharge(){
        if(this.showNumCode){
          var code = 'USDT';
        }else{
          var code = 'GTZ';
        }
        this.$router.push('/recharge/'+code)
      }
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>
    .assets-home{
      width: 100%;
      min-height: 100vh;
      background-color: #111214;
      color: #fff;
    }
    .assets-box{
      height: 105px;
      /* white-space: nowrap;
      overflow-x: scroll; */
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      padding-left: 15px;
    }
    .assets-box::-webkit-scrollbar {
      display: none
    }
    .assets-box-back{
      width: 50%;
      height: 105px;
      display: inline-block;
      position: relative;
      margin-right: 15px;
      padding: 26px 0px 23px 21px;
      background-color: #6E59FF;
      border-radius: 10px;
      .font-usdt{
        font-family: axis;
        margin-bottom:9px;
      }
    }
    .assets-tab-list{
      padding: 32px 15px;
      margin-bottom: 68px;
    }
    .assets-default-font{
      font-size: 16px;
      color: rgba(255, 255, 255, .4);
      margin-right: 32px;
    }
    .assets-active-font{
      font-size: 18px;
      color: #fff;
      margin-right: 32px;
    }
    .assets-icon{
      position: absolute;
      left: 16px;
      top: 25px;
      display: inline-block;
      width: 4px;
      height: 4px;
      position:absolute;
      background-color: #fff;
      border-radius: 26px;
    }
    .assets-bottom-btn{
      position: fixed;
      bottom:0px;
      width: 100%;
      background-color: #111214;
      padding: 6px 16px;
      display: flex;
      justify-content: space-between;
      .btn1{
        width: 50%;
        height: 56px;
        line-height: 56px;
        text-align: center;
        border: 1px solid #6E59FF;
        border-radius: 6px;
        margin-right: 12px;
        font-size:16px;
        font-weight: bold;
        color: #6E59FF;
        background-color: rgba(0,0,0,0);
        img{
          vertical-align: middle;
          position: relative;
          top: -1px;
        }
      }
      .btn2{
        width: 50%;
        height: 56px;
        line-height: 56px;
        text-align: center;
        border: none;
        font-size:16px;
        font-weight: bold;
        border-radius: 6px;
        margin-right: 12px;
        background-color: #6E59FF;
        img{
          vertical-align: middle;
          position: relative;
          top: -1px;
        }
      }
    }
  </style>
